@import '@devui/theme/styles-var/devui-var.scss';

.no-left-padding {
  &.#{$devui-prefix}-panel-body-collapse {
    &::before {
      content: none !important;
    }

    .#{$devui-prefix}-panel-content {
      border-left: none !important;
    }
  }
}

.#{$devui-prefix}-panel {
  line-height: 1.5;
  background-color: $devui-base-bg;

  .#{$devui-prefix}-panel-heading {
    padding: 12px 20px;
    color: $devui-text;

    d-panel-header {
      line-height: 1.5;
    }
  }

  .#{$devui-prefix}-panel-body {
    display: flex;
    position: relative;
    border-top: 1px solid $devui-dividing-line;

    .#{$devui-prefix}-panel-content {
      line-height: 1.5;
      padding: 15px;
      background: $devui-base-bg;
      flex: 1;
    }

    &.#{$devui-prefix}-panel-body-collapse {
      &::before {
        content: '';
        width: 30px;
        height: 100%;
      }

      .#{$devui-prefix}-panel-content {
        border-left: 2px solid $devui-dividing-line;
      }
    }
  }

  .#{$devui-prefix}-panel-footer {
    padding: 10px 15px;
    color: $devui-text;
    background-color: $devui-area;

    d-panel-footer {
      line-height: 1.5;
    }
  }

  &.#{$devui-prefix}-panel-default {
    .#{$devui-prefix}-panel-heading,
    .#{$devui-prefix}-panel-body {
      background-color: $devui-default-bg;
    }
  }

  &.#{$devui-prefix}-panel-primary {
    .#{$devui-prefix}-panel-heading,
    .#{$devui-prefix}-panel-body {
      background-color: $devui-primary-bg;
    }

    .#{$devui-prefix}-panel-body-collapse {
      .#{$devui-prefix}-panel-content {
        border-color: $devui-primary-line;
      }
    }
  }

  &.#{$devui-prefix}-panel-info {
    .#{$devui-prefix}-panel-heading,
    .#{$devui-prefix}-panel-body {
      background-color: $devui-info-bg;
    }

    .#{$devui-prefix}-panel-body-collapse {
      .#{$devui-prefix}-panel-content {
        border-color: $devui-info-line;
      }
    }
  }

  &.#{$devui-prefix}-panel-success {
    .#{$devui-prefix}-panel-heading,
    .#{$devui-prefix}-panel-body {
      background-color: $devui-success-bg;
    }

    .#{$devui-prefix}-panel-body-collapse {
      .#{$devui-prefix}-panel-content {
        border-color: $devui-success-line;
      }
    }
  }

  &.#{$devui-prefix}-panel-warning {
    .#{$devui-prefix}-panel-heading,
    .#{$devui-prefix}-panel-body {
      background-color: $devui-warning-bg;
    }

    .#{$devui-prefix}-panel-body-collapse {
      .#{$devui-prefix}-panel-content {
        border-color: $devui-warning-line;
      }
    }
  }

  &.#{$devui-prefix}-panel-danger {
    .#{$devui-prefix}-panel-heading,
    .#{$devui-prefix}-panel-body {
      background-color: $devui-danger-bg;
    }

    .#{$devui-prefix}-panel-body-collapse {
      .#{$devui-prefix}-panel-content {
        border-color: $devui-danger-line;
      }
    }
  }

  .#{$devui-prefix}-panel-leave-active {
    transition: all 0.3s ease-in-out;
    animation: panelUpOut 0.3s ease-in-out;
    animation-fill-mode: both;
  }

  .#{$devui-prefix}-panel-enter-active {
    transition: all 0.3s ease-in-out;
    animation: panelUpIn 0.3s ease-in-out;
    animation-fill-mode: both;
  }
  @keyframes panelUpOut {
    0% {
      transform: scaleY(1);
      transform-origin: 0% 0%;
      opacity: 1;
    }

    100% {
      transform: scaleY(0);
      transform-origin: 0% 0%;
      opacity: 0;
    }
  }
  @keyframes panelUpIn {
    0% {
      transform: scaleY(0);
      transform-origin: 0% 0%;
      opacity: 0;
    }

    100% {
      transform: scaleY(1);
      transform-origin: 0% 0%;
      opacity: 1;
    }
  }
}
